<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024年12月10日, 0010
  Time: 09:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <!-- 1.引入css样式文件 -->
    <!-- 1-1.引入 Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"
          rel="stylesheet" />
    <!-- 2.引入js文件 -->
    <!-- 2-1.引入 jQuery -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <!-- 2-1.引入Bootstrap Core JavaScript -->
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 3.在页面的上方导入菜单导航条navigation.jsp -->
<jsp:include page="navigation.jsp" />

<!-- 4.用于查询用户的from表单 start-->
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline" method="get"
              action="${pageContext.request.contextPath }/listUser.action">
            <div class="form-group">
                <label>用户ID</label> <input type="text" class="form-control"
                                           value="" name="id" />
            </div>
            <div class="form-group">
                <label>用户名</label> <input type="text" class="form-control"
                                          value="" name="username" />
            </div>
            <div class="form-group">
                <label>用户角色</label> <select class="form-control" name="role">
                <option value="" selected="selected">--选择--</option>
                <option value="超级用户">超级用户</option>
                <option value="普通用户">普通用户</option>
            </select>
            </div>
            <div class="form-group">
                <label>用户状态</label> <select class="form-control" name="state">
                <option value="" selected="selected">--选择--</option>
                <option value="1">激活状态</option>
                <option value="2">非激活状态</option>
            </select>
            </div>
            <button type="submit" class="btn btn-primary">查询</button>
        </form>
    </div>
</div>
<!-- 用于查询用户的from表单 end-->

<!-- 5."新建用户"超链接，点击后将弹出"新建用户"模态框 -->
<a href="#" class="btn btn-primary" data-toggle="modal"
   data-target="#newUserDialog" onclick="">新建用户</a>

<!-- 6.显示用户列表 start-->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">用户信息列表</div>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>用户ID</th>
                    <th>用户名</th>
                    <th>用户性别</th>
                    <th>联系电话</th>
                    <th>用户角色</th>
                    <th>用户状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${userList}" var="row">
                    <tr>
                        <td>${row.id}</td>
                        <td>${row.username}</td>
                        <td>${row.gender}</td>
                        <td>${row.telephone}</td>
                        <td>${row.role}</td>
                        <td>${row.state == 1 ? '激活' : '非激活'}</td>
                        <td>
                            <a href="#" class="btn btn-primary btn-xs"
                               data-toggle="modal" data-target="#editUserDialog"
                               onclick="editUser(${row.id})">修改</a>
                            <a href="#" class="btn btn-danger btn-xs"
                               onclick="deleteUser(${row.id})">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul class="pagination">
                <c:if test="${pageInfo.pages > 1}">
                    <c:if test="${pageInfo.pageNum > 1}">
                        <li><a href="listUser.action?pageNum=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}">上一页</a></li>
                    </c:if>

                    <c:forEach var="i" begin="1" end="${pageInfo.pages}">
                        <li class="${pageInfo.pageNum == i ? 'active' : ''}">
                            <a href="listUser.action?pageNum=${i}&pageSize=${pageInfo.pageSize}">${i}</a>
                        </li>
                    </c:forEach>

                    <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                        <li><a href="listUser.action?pageNum=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}">下一页</a></li>
                    </c:if>
                </c:if>
            </ul>
        </div>
    </div>
</div>
<!-- 显示用户列表 end-->

<!-- 7.在页面的下方导入foot.jsp -->
<jsp:include page="../foot.jsp" />
<!-- 8.定义用于“新增用户”的模态框，主要用于新增管理员。  start -->
<div class="modal fade" id="newUserDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">
                    <!-- 在"modal-title"下设置模态框的标题 -->
                    新建用户信息
                </h4>
            </div>
            <div class="modal-body">
                <!-- 在"modal-body"下设置模态框的内容，一般在这里添加form表单 -->
                <div class="panel-body">
                    <form>
                        <div class="input-group ">
                            <span class="input-group-addon">用户名</span> <input type="text"
                                                                              class="form-control" name="username" id="add_username"
                                                                              placeholder="必填">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">密码</span> <input type="password"
                                                                             class="form-control" name="password" id="add_password"
                                                                             placeholder="必填">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">性别</span> <span
                                class="form-control"> <input type="radio" name="gender"
                                                             id="add_male" value="男" checked />男
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio"
                                                                          name="gender" id="add_female" value="女" />女
								</span>
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">邮箱</span> <input type="text"
                                                                             class="form-control" name="email" id="add_email"
                                                                             placeholder="可不填写">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">电话号码</span> <input type="text"
                                                                               class="form-control" name="telephone" id="add_telephone"
                                                                               placeholder="可不填写">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">用户介绍</span>
                            <textarea class="form-control" name="introduce"
                                      id="add_introduce" placeholder="可不填写"></textarea>
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">用户角色</span> <select
                                class="form-control" name="role" id="add_role">
                            <option value="超级用户">超级用户</option>
                            <option value="普通用户">普通用户</option>
                        </select>
                        </div>
                        <br />
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <!-- 在"modal-footer"下设置模态框的提交按钮 -->
                <button type="button" class="btn btn-primary"
                        onclick="createUser()">新建用户</button>
            </div>
        </div>
    </div>
</div>
<!-- 定义用于“新增用户”的模态框，主要用于新增管理员。  end -->

<!-- 9.定义用于“修改用户”的模态框。  start -->
<div class="modal fade" id="editUserDialog" tabindex="-1" role="dialog"
     aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editModalLabel">
                    <!-- 在"modal-title"下设置模态框的标题 -->
                    修改用户信息
                </h4>
            </div>
            <div class="modal-body">
                <!-- 在"modal-body"下设置模态框的内容，一般在这里添加form表单 -->
                <div class="panel-body">
                    <form>
                        <input type="hidden" id="edit_id" name="id" />
                        <div class="input-group ">
                            <span class="input-group-addon">用户名</span> <input type="text"
                                                                              class="form-control" name="username" id="edit_username">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">密码</span> <input type="password"
                                                                             class="form-control" name="password" id="edit_password">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">性别</span> <span
                                class="form-control"> <input type="radio" name="gender"
                                                             id="edit_male" value="男" />男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
                                type="radio" name="gender" id="edit_female" value="女" />女
								</span>
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">邮箱</span> <input type="text"
                                                                             class="form-control" name="email" id="edit_email"
                                                                             placeholder="可不填写">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">电话号码</span> <input type="text"
                                                                               class="form-control" name="telephone" id="edit_telephone"
                                                                               placeholder="可不填写">
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">用户介绍</span>
                            <textarea class="form-control" name="introduce"
                                      id="edit_introduce" placeholder="可不填写"></textarea>
                        </div>
                        <br />
                        <div class="input-group ">
                            <span class="input-group-addon">用户角色</span> <select
                                class="form-control" name="role" id="edit_role">
                            <option value="超级用户">超级用户</option>
                            <option value="普通用户">普通用户</option>
                        </select>
                        </div>
                        <br />
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <!-- 在"modal-footer"下设置模态框的提交按钮 -->
                <button type="button" class="btn btn-primary"
                        onclick="updateUser()">修改用户</button>
            </div>
        </div>
    </div>
</div>
<!-- 定义用于“修改用户”的模态框。  end -->
<!-- 10.编写jQuery代码，负责客户端与服务器端的数据交互 -->
<script type="text/javascript">

    // 使用ajax提交数据的方式，新增一个用户。
    function createUser() {

        //1.获得用户在页面上输入的用户名、密码，并判断是否为空。
        // 如果为空，则弹出提示框提醒用户输入。
        var username = $("#add_username").val();
        if (username==null || username==""){
            alert("必须填写用户名");
            return false;
        }
        var password = $("#add_password").val();
        if (password==null || password==""){
            alert("必须填写密码");
            return false;
        }
        // 2.创建一个javascript中的用户对象
        var user = new Object();
        // 3.将form表单中的输入控件的值，包括：用户名、密码、性别、邮箱、电话号码、
        // 自我介绍、用户角色，赋值到用户对象的属性上 。
        user.username = $("#add_username").val();
        user.password = $("#add_password").val();
        if($("#add_male").is(":checked")==true){
            user.gender = "男";
        }
        else{
            user.gender = "女";
        }
        user.email = $("#add_email").val();
        user.telephone = $("#add_telephone").val();
        user.introduce = $("#add_introduce").val();
        user.role = $("#add_role").val();
        // 4. 调用$.ajax()方法，向服务器发送异步http请求。
        $.ajax({
            //1) 指定待发送http请求的URL地址。
            url: "${pageContext.request.contextPath}/createUser.action",
            //2) 设置http请求的类型，为POST。
            type: "post",
            //3) 指定要发送到服务器的数据的数据类型，支持复杂的包含中文的JSON数据。
            contentType: "application/json;charset=UTF-8",
            //4) 设置要发送到服务器的数据。
            data: JSON.stringify(user), //将一个user对象转换成JSON字符串并发送到服务器。
            //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
            success: function(data) {
                //本例中，服务器端返回的不是JSON数据，就是一个普通数据。
                if(data =="SUCCESS"){
                    alert("成功新增1个用户。");
                    window.location.reload();//重新加载页面
                }else{
                    alert(data);
                    window.location.reload();//重新加载页面
                }
            }

        });
    }
    //通过用户id，向服务器发送ajax请求，从服务器端的数据库中，查询出待修改的用户信息。
    function editUser(id) {

        // 1. 调用$.ajax()方法，向服务器发送异步http请求
        $.ajax({
            //1) 指定待发送http请求的URL地址。
            url: "${pageContext.request.contextPath}/findUserById.action",
            //2) 设置http请求的类型，为GET。
            type: "get",
            //3) 将cache设置为false将不会从浏览器缓存中加载请求信息。
            cache:false,
            //4) 设置要发送到服务器的数据。本例中是一个简单格式的JSON数据。
            data: {"id":id},
            //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
            // 本例中，服务器将返回一个描述用户信息的JSON字符串，在这里，javascript会
            // 将(从服务器接收到的)JSON字符串，自动转换成javascript中的user对象。
            success: function(data) {
                //将user对象的id属性值，设置到(id名为edit_id的)输入控件上
                $("#edit_id").val(data.id);
                //将user对象的username属性值，设置到(id名为edit_username的)输入控件上
                $("#edit_username").val(data.username);
                $("#edit_password").val(data.password);
                if(data.gender=='男'){
                    $("#edit_male").prop("checked",true);
                }
                else{
                    $("#edit_female").prop("checked",true);
                }
                $("#edit_email").val(data.email);
                $("#edit_telephone").val(data.telephone);
                $("#edit_introduce").val(data.introduce);
                $("#edit_role").val(data.role);
            }
        });
    }
//执行修改用户操作
        function updateUser() {

            //1.获得用户在页面上输入的用户名、密码，并判断是否为空。
            // 如果为空，则弹出提示框提醒用户输入。
            var username = $("#edit_username").val();
            if (username==null || username==""){
                alert("必须填写用户名");
                return false;
            }
            var password = $("#edit_password").val();
            if (password==null || password==""){
                alert("必须填写密码");
                return false;
            }
// 2.创建一个javascript中的用户对象，并将页面表单中的各个字段赋值给这个对象的属性。
            var user = new Object();
            // 3.将form表单中的输入控件的值，包括：用户id、用户名、密码、性别、邮箱、
            // 电话号码、自我介绍、用户角色，赋值到用户对象的属性上 。
            user.id = $("#edit_id").val();
            user.username = $("#edit_username").val();
            user.password = $("#edit_password").val();
//$("#edit_male").is(":checked") 判断是否选择了男性单选按钮
            if($("#edit_male").is(":checked")==true){
                user.gender = "男";
            }
            else{
                user.gender = "女";
            }
            user.email = $("#edit_email").val();
            user.telephone = $("#edit_telephone").val();
            user.introduce = $("#edit_introduce").val();
            user.role = $("#edit_role").val();

            // 4. 调用$.ajax()方法，向服务器发送异步http请求
            $.ajax({
                //1) 指定待发送http请求的URL地址。
                url: "${pageContext.request.contextPath}/updateUser.action",
                //2) 设置http请求的类型，为POST。
                type: "post",
                //3) 指定要发送到服务器的数据的数据类型，支持复杂的包含中文的JSON数据。
                contentType: "application/json;charset=UTF-8",
                //4) 设置要发送到服务器的数据。本例中是将一个javascript中的user对象，
                // 转换成JSON字符串，然后发送到服务器。
                data: JSON.stringify(user),
                //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
                success: function(data) {
                    //本例中，服务器端返回的不是JSON数据，就是一个普通数据。
                    if(data =="SUCCESS"){
                        alert("成功修改用户信息。");
                        window.location.reload();//重新加载页面
                    }else{
                        alert(data);
                        window.location.reload();//重新加载页面
                    }
                }
            });
        }
    // 根据用户id，删除一个用户记录。
    function deleteUser(id) {
        //先弹出一个确认框，询问用户是否要删除。
        if(confirm('确实要删除该用户吗?')) {
            //用户点击确认框后，再调用$.post()方法，向服务器发送(基于ajax的)异步http请求。
            $.post(
                "${pageContext.request.contextPath}/deleteUser.action",
                {"id":id},
                function(data){
                    if(data =="SUCCESS"){
                        alert("成功删除一个用户。");
                        window.location.reload();
                    }else{
                        alert(data);
                        window.location.reload();
                    }
                }
            );
        }
    }


</script>



    </body>
</html>